<template>
  <Layout>
    <n-grid :cols="10">
      <n-gi :span="9">
        <span class="title">{{ job_name }}</span>
        <span>{{ data.salary_min }}k - {{ data.salary_max }}k</span>
        |
        <span>{{ address }}</span>
        |
        <span>{{ industry_name }}</span>
        <n-tag type="primary" round style="margin-left: 10px">{{ type }}</n-tag>
      </n-gi>
      <n-gi :span="1">
        <n-button type="primary" @click="handle">编辑</n-button>
      </n-gi>
    </n-grid>
  </Layout>
</template>

<script setup>
import Layout from '../itemLayout.vue'
import { getCity, getJobName, getIndustriesName } from '@/data'
let props = defineProps({
  data: null
})
const $emit = defineEmits(['edit'])
function handle() {
  $emit('edit',props.data.id)
}

//计算地址
let address = computed(() => {
  return getCity(props.data.address_code)
})

let job_name = computed(()=> {
  return getJobName(props.data.job_code)
})


let industry_name = computed(()=> {
  return getIndustriesName(props.data.industry_code)
})

let type = computed(()=> {
  const t = props.data.type
  if(t===0)
    return '实习'
  if(t===1)
    return '应届'
  if(t===2)
    return'全职'
  if(t===3)
    return'兼职'
})

</script>

<style scoped>
.title {
  color: #333;
  font-size: 16px;
  font-weight: 600;
  margin-right: 10px;
}
span {
  color: #333639;
  font-size: 16px;
  margin-left: 10px;
  margin-right: 10px;
}
</style>
